<template>
    <div class="productManage">
        <x-header v-show="!isWeChar" style="z-index: 110;">
            <div slot="default" class="common__header--title">产品管理</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <div style="z-index: 110;" class="common__title">
            <scroller :lock-x="false" lock-y>
                <div class="common__title_btn">
                    <checker v-model="insureType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                        <checker-item class="grid-center" :value="item.key" v-for="(item, index) in baseRiskCodeList" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
            </scroller>
        </div>
        <transition name="fadedis">
            <div v-show="editable" class="product-alert">可拖拽调换展示顺序,左侧可以进行滚动</div>
        </transition>
        <div>
            <draggable element="ul" v-model="addPro" :options="dragOptions" :move="onMove">
                <transition-group type="transition" :name="'flip-list'">
                    <li class="list-group-item" :style="setBorder(index)" v-for="(element,index) in addPro" :key="element.order">
                        <div :class="element.productNameClass">
                            <span class="product-name-title">
                                <nobr>{{element.productCname}}</nobr>
                            </span>
                            <span :class="element.productTypeClass" :style="getProType(element.riskCode)">{{element.riskName}}</span>
                        </div>
                        <div @click="goDetail(element)" :class="element.productInfoSetClass">预览</div>
                        <div v-show="element.rate!='NaN'&&!isNaN(element.rate)&&element.rate!=0.0&&element.rate!=0" class="product-info-info">推广费{{element.rate|rate}}%</div>
                        <img v-show="editable" @click="deletePro(index);" class="product-img" src="~assets/x3/ico/delete-img.png">

                    </li>
                </transition-group>
            </draggable>
            <div style="border-top:2px solid #CDCDCD">
                <ul>
                    <li class="list-group-item" :style="setBorder(index)" v-for="(element,index) in npPro" v-show="!shop.channelPro||(typeof(shop.channelPro[element.productId])!='undefined')" :key="element.order">
                        <div :class="element.productNameClass">
                            <span class="product-name-title">
                                <nobr>{{element.productCname}}</nobr>
                            </span>
                            <span :class="element.productTypeClass" :style="getProType(element.riskCode)">{{element.riskName}}</span>
                        </div>
                        <div @click="goDetail(element)" :class="element.productInfoSetClass">预览</div>
                        <div v-show="element.rate!='NaN'&&!isNaN(element.rate)&&element.rate!=0.0&&element.rate!=0" class="product-info-info">推广费{{element.rate|rate}}%</div>
                        <img @click="addProMe(index);" v-show="editable" class="product-img" src="~assets/x3/ico/add-img.png">
                    </li>

                </ul>
            </div>
        </div>
        <div class="product-scroll"></div>

        <div class="btn-manage"></div>
        <!-- <div @click="setEdit()" class="shop-edit_save">{{editType}}</div> -->
        <!-- <div class="list-group col-md-3">
                                                                                                                                                                                                                                                                                                                                                    <pre>{{listString}}</pre>
                                                                                                                                                                                                                                                                                                                                                </div> -->

    </div>
</template>

<script>
// import SharePage from "src/js/sharePage"; //引入微信分享js
import { FooterIndex, Mutations, RouteUrl, WeChatShare, Url_Key } from "src/common/const";
import draggable from 'vuedraggable';
import { mapState, mapActions } from "vuex";
import { XHeader, CheckerItem, Group, Scroller, Checker, Cell, XButton, Panel, GroupTitle } from "vux";
import { RequestUrl } from 'src/common/url';
export default {
    components: {
        Group,
        XHeader,
        Cell,
        Scroller,
        Checker,
        CheckerItem,
        draggable
    },
    data() {
        return {
            productNameClass: "product-name",
            productTypeClass: "product-type",
            productInfoSetClass: "product-info-set",
            baseRiskCodeList: [
                {
                    key: "all",
                    value: "全部"
                }
            ],
            insureType: "all",
            list: [{ productCname: "安居乐", productId: "88", rate: "3105", riskCode: "3105", order: 1, rate: "0.1" }, { productCname: "安居", productId: "88", rate: "3105", riskCode: "3105", order: 2, rate: "0.1" }, { productCname: "安居", productId: "88", rate: "3105", riskCode: "3105", order: 3, rate: "0.1" }],
            editable: true,  //设置为false不能改变位置
            editType: "编辑",
            address: "",
            addPro: [],
            npPro: [],
            isQuery: true,
            saveAddPro: []
        };
    },
    watch: {
    },
    filters: {
        // rate(value) {
        //     return value * 100
        // },
        rate(value) {
            value = value * 100;
            value = value + "";
            let num = value.indexOf('.');
            if (num < 1) {
                return value;
            } else {
                return value.substring(0, num);
            }
            return value;
        },
    },
    methods: {
        productCname(value, type) {
            if (value != null && value != "") {
                let width = document.body.clientWidth;
                if (type == 1) {
                    let number = 20;
                    if (width < 360) {
                        number = 6;
                    } else if (width < 410) {
                        number = 8;
                    } else if (width < 500) {
                        number = 9;
                    }
                    if (value.length > number) {
                        return value.substring(0, number) + "...";
                    } else {
                        return value.substring(0, number);
                    }
                } else {
                    let number = 20;
                    if (width < 360) {
                        number = 11;
                    } else if (width < 410) {
                        number = 14;
                    } else if (width < 500) {
                        number = 16;
                    }
                    if (value.length > number) {
                        return value.substring(0, number) + "...";
                    } else {
                        return value.substring(0, number);
                    }
                }
            }
            // let width = document.body.clientWidth;
            // // console.log(width);
            // if (width < 380) {
            //     number = 5;
            // } else if (width < 430) {
            //     number = 8;
            // }
            // sessionStorage["SHOP_INDEX_FORM_PATH"]
        },
        // initShare() {
        //     // refShareUUid
        //     let _this = this;
        //     let parmList = [];
        //     let uuid = "";
        //     uuid = this.shareUuid;
        //     let urlParm = {
        //         key: Url_Key.SHARE_UUID,
        //         value: uuid
        //     }
        //     parmList.push(urlParm);
        //     let shareUrl = RequestUrl.BASE_URL + RouteUrl.SHOP_INDEX + this.$common.setShareUrl(parmList);
        //     this.shopShareUrl = shareUrl;
        //     let shopIntroduct = this.shop.shopHeaderState.shopIntroduct;
        //     if (this.$common.isEmpty(shopIntroduct)) {
        //         shopIntroduct = "恒华出行宝";
        //     }

        //     let imgUrl = this.shop.shopHeaderState.header;
        //     if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
        //         //补全产品的图片路径
        //         imgUrl = RequestUrl.WEB_PATH + imgUrl;
        //     }


        //     // alert("shopUrl:" + shareUrl);
        //     let shareData = {
        //         _this: this,
        //         shareData: {
        //             title: this.shop.shopHeaderState.shopName,
        //             desc: shopIntroduct,
        //             imgUrl: imgUrl,
        //             url: shareUrl,
        //             _this: this,
        //             type: 3
        //         }
        //     };
        //     // document.title = this.shop.shopHeaderState.shopName;
        //     // share.shareInit(shareData);
        //     SharePage.weChatShare(shareData);

        // },
        goDetail(element) {
            // [Mutations.SET_IS_GET_INDEX](state, isGetIndex) {
            //     state.isGetIndex = isGetIndex;
            // },
            this.$common.storeCommit(this, Mutations.SET_IS_GET_INDEX, false);
            let parmList = [];
            // let urlParm = {
            //   key: Url_Key.SHARE_UUID,
            //   value: this.shareUuid
            // }
            let urlPro = {
                key: Url_Key.PRODUCT_ID,
                value: element.productId
            }
            parmList.push(urlPro);
            // parmList.push(urlParm);


            // let shareUrl = RequestUrl.BASE_URL + RouteUrl.DETAILS + this.$common.setShareUrl(parmList);
            //组合URI并跳转
            this.$common.goUrl(this, RouteUrl.DETAILS, this.$common.setShareUrl(parmList));
        },
        deletePro(index) {
            if (this.isQuery) {
                this.isQuery = false;
                let _this = this;
                let indexData;
                let newAddpro = [];
                for (let i = 0; i < this.addPro.length; i++) {
                    if (i == index) {
                        indexData = this.addPro[i];
                    } else {
                        newAddpro.push(this.addPro[i]);
                    }
                }
                this.addPro = newAddpro;
                this.npPro.push(indexData);
                setTimeout(() => {
                    _this.isQuery = true;
                }, 400);
            }


        },
        addProMe(index) {
            if (this.isQuery) {
                this.isQuery = false;
                let _this = this;
                let indexData;
                let newArray = [];
                for (let i = 0; i < this.npPro.length; i++) {
                    if (i == index) {
                        indexData = this.npPro[i];
                    } else {
                        newArray.push(this.npPro[i]);
                    }
                }
                this.npPro = newArray;
                this.addPro.push(indexData);
                setTimeout(() => {
                    _this.isQuery = true;
                }, 400);
            }

        },
        init() {
            for (let i = 0; i < this.riskCodeList.length; i++) {
                this.isReadRisk = true;
                this.baseRiskCodeList.push(this.riskCodeList[i]);
            }
            let _this = this;
        },
        setEdit() {
            this.editable = !this.editable;
            if (this.editable) {
                this.editType = "保存";
            } else {
                this.editType = "编辑";
            }
        },
        setBorder(index) {
            if (index != 0) {
                return "border-top: 1px solid #F0F0F0;";
            }
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.SHOP_MANAGE);
        },
        getProType(code) {
            if (typeof code != "undefined") {

                let riskCodeStyle = "border-color:" + this.$store.state.colorRiskTyle[code].color + ";color:" + this.$store.state.colorRiskTyle[code].color;

                return riskCodeStyle;
            } else {
                return "";
            }
        },
        orderList() {
            this.list = this.list.sort((one, two) => { return one.order - two.order; })
        },
        onMove({ relatedContext, draggedContext }) {
            const relatedElement = relatedContext.element;
            const draggedElement = draggedContext.element;
            return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
        },
        queryDaya(operation) {
            let branchCode = "";
            // debugger
            if (this.$common.isNotEmpty(this.user.userDto.agrementNo) && this.$common.isNotEmpty(this.user.userDto.branchCode)) {
                branchCode = this.user.userDto.branchCode;
            } else if (this.$common.isNotEmpty(this.user.userDto.areaCode)) {
                branchCode = this.user.userDto.areaCode;
            }

            if (this.$common.isEmpty(branchCode)) {
                branchCode = this.hotArea.areaCode;
            }

            // if (this.$common.isEmpty(this.user.userDto.agrementNo)) {
            //     branchCode = this.hotArea.areaCode;
            // } else {
            //     branchCode = this.user.userDto.branchCode;
            // }
            // alert("用户branchCode:" + this.user.userDto.branchCode + "   areaCode:" + this.user.userDto.areaCode + " 地区:" + this.hotArea.areaCode + "  使用:" + branchCode);
            let data = {
                _this: this,
                userCode: this.user.userDto.userCode,
                branchCode: branchCode,
                operation: operation,
                type: this.insureType,
                page: 'manager'
            }

            // alert(this.user.userDto.branchCode + "   " + this.user.userDto.areaCode + this.hotArea.areaCode + "      " + branchCode);
            this.$common.storeCommit(this, Mutations.PRODUCT_MANAGE, data);
        },
        saveData(type) {
            let data = {
                _this: this,
                type: type
            }
            this.$common.storeCommit(this, Mutations.PRODUCT_MANAGE_SAVE, data);
        }
    },
    computed: {
        ...mapState({
            shop: "shop",

        }),
        dragOptions() {
            return {
                animation: 0,
                group: 'description',
                disabled: !this.editable,
                ghostClass: 'ghost'
            };
        },
        listString() {
            return JSON.stringify(this.list, null, 2);
        },
        user() {
            return this.$store.state.user;
        },
        hotArea() {
            return this.$store.state.saveInsure.hotArea;
        },
        riskCodeList() {
            return this.$store.state.riskCodeList;
        },
        isWeChar() {
            return this.$store.state.isWeChar;
        },
        shareUuid() {
            return this.$store.state.shareUuid;
        },
        isInitData() {
            return this.$store.state.isInitData;
        },
        isShowRate() {
            return this.$store.state.isShowRate;
        }
    },
    watch: {
        insureType(cur, old) {
            this.saveData(old);
            this.queryDaya("get");
        },
        isInitData(cur, old) {
            if (cur) {
                this.init();
                this.queryDaya("get");
            }
        },
    },
    beforeMount() {
        // let test = this.user;

        // if (sessionStorage["INSURE_FORM_URL"] == "/") {
        //     this.$common.goUrl(this, RouteUrl.DETAILS);
        // }
    },
    beforeDestroy() {
        this.saveData(this.insureType);
    },
    mounted() {
        sessionStorage["DETAILS_FORM_URL"] = RouteUrl.PRODUCT_MANAGE;
        document.title = "产品管理";
        if (this.isInitData) {
            this.queryDaya("get");
            this.init();
        }
        // if (this.user.isLogin) {
        // } else {
        //     this.$common.showMsg(this, "未登录,无法访问", "red;",true);
        //     this.$common.goUrl(this, RouteUrl.MY);
        // }
        this.$init.subPageInit(this);
        setTimeout(() => {
            $(".product-scroll").css("height", window.screen.height);
        }, 10);

        // if (this.user.isLogin) {
        //     if (this.user.userDto.userType == "2" || this.user.userDto.userType == "5") {
        //         this.isShowRate = true;
        //     }
        // }
    },
}
</script>

<style lang="scss" scoped>
.flip-list-move {
  transition: transform 0.5s;
}

.btn-manage {
  width: 100%;
  height: 30px;
}
.product-scroll {
  width: 100px;
  height: 100%;
  background-color: rgba(242, 138, 138, 0);
  //   background-color: red;
  display: block;
  position: absolute;
  float: right;
  z-index: 100;
  top: 0;
}
.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
}

.list-group-item {
  height: 35px;
  line-height: 35px;
  cursor: move;
  background: #fff; // padding: 5px 10px;
  div {
    display: -webkit-inline-box;
  } // padding-top:10px;
  // padding-bottom: 10px;
  padding: 5px 0px;
}

.list-group-item i {
  cursor: pointer;
}

.product-name {
  font-size: 14px;
  width: 71%;
  padding-left: 2%;
}
.product-type {
  font-size: 13px; // display: -webkit-inline-box;
  border: 1.5px solid;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 4px;
}
.product-type-rate {
  font-size: 13px; // display: -webkit-inline-box;
  border: 1.5px solid;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 4px;
}
.product-name-rate {
  font-size: 14px;
  width: 50%;
  padding-left: 2%;
}
.product-info-set-rate {
  width: 10%;
  font-size: 13px;
  color: #C8161D;
}
// 64 - 17 =37
.product-info-set {
  width: 10%;
  font-size: 13px;
  color: #C8161D;
}

.product-info-info {
  width: 22%;
  font-size: 13px;
  color: #C8161D;
}

.product-name-title {
  font-weight: bold;
}

.product-img {
  display: block;
  float: right;
  width: 22px;
  margin-top: 7px;
  margin-right: 3%;
}

.shop-edit_save {
  display: -webkit-inline-box;
  padding: 15px;
  border-radius: 30px;
  background: #C8161D;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: fixed;
  right: 5%;
  bottom: 3%;
}

.product-alert {
  text-align: center;
  font-size: 13px;
  color: rgb(81, 81, 81);
  background: rgb(205, 205, 205);
  padding: 8px 0px;
}
</style>
